import React, { FC, useState, useEffect, useRef } from 'react'
import { View, Text, TouchableOpacity, Alert, Image } from 'react-native'
import { Camera } from 'expo-camera'

type Props = {
}

const More:FC<Props> = (props) => {

  const [hasPermission, setHasPermission] = useState<boolean | null>(null);
  const [type, setType] = useState(Camera.Constants.Type.back);
  const [isClick, setIsClick] = useState(false)
  const [img, setImg] = useState('')
  const camera = useRef(null)

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  const handlePress = () => {
    setIsClick(true)
  }

  const takePicture = async () => {
    if (camera) {
      let c = camera.current as any
      let photo = await c.takePictureAsync()
      // Alert.alert(photo)
      setImg(photo.uri)
    }
    setIsClick(false)
  }

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  return (
    <>
      {
        !isClick
        ? (
          <View
            style={{
              flex: 1,
              alignItems: 'center'
            }}
          >
            <TouchableOpacity
              onPress={handlePress}
            >
              <View
                style={{
                  width: 100,
                  height: 40,
                  backgroundColor: '#ee742f',
                  marginTop: 20
                }}
              >
                <Text
                  style={{
                    textAlign: 'center',
                    lineHeight: 40,
                    color: '#fff'
                  }}
                >拍照</Text>
              </View>
              <View>
                {
                  <Image
                    source={{uri: img}}
                    style={{
                      width: 200,
                      height: 200
                    }}
                  ></Image>
                }
              </View>
            </TouchableOpacity>
          </View>
        )
        : (
          <View
            style={{
              height: '100%'
            }}
          >
            <Camera style={{
                width: '100%',
                flex: 1,
                position: 'relative',
                alignItems: 'center'
              }} 
              type={type}
              ref={camera}
            >
              <TouchableOpacity
                onPress={takePicture}
                style={{
                  position: 'absolute',
                  bottom: 20,
                  width: 50,
                  height: 50,
                  backgroundColor: '#ee742f',
                  borderRadius: 25
                }}
              >
                <View>
                  <Text
                    style={{
                      color: '#fff',
                      lineHeight: 50,
                      textAlign: 'center'
                    }}
                  >拍照</Text>
                </View>
              </TouchableOpacity>
            </Camera>
          </View>
        )
      }
    </>
  )
}

export default More